<template>
	<view class="personal">
		<view class="user_info">
			<view class="background">
			</view>
			<view class="info">
				<u-card :head-style="headStyle">
					<view class="info_wrap" slot="body">
						<view class="image">
							<image src="https://z3.ax1x.com/2021/11/28/oKpDmt.png" mode="widthFix"></image>
						</view>
						<view class="information">
							<view class="name">
								{{AdminInfo.real_name}}
							</view>
							<view class="phone">
								{{AdminInfo.account}}
							</view>
						</view>
					</view>
				</u-card>
			</view>
		</view>
		<view class="tool">
			<!-- <u-card>
				<view class="tool_head" slot="head">
					<text class="title">我的订单</text>
					<text class="view_all" @click="view_all(0)">查看全部 ></text>
				</view>
				<view class="tool_wrap" slot="body">
					<view class="tool_item" @click="view_all(0)">
						<view class="image">

							<u-icon name="bag-fill" color="#eb3626" size="60"></u-icon>

						</view>
						<view class="text">
							全部
						</view>
					</view>
					<view class="tool_item" @click="view_all(1)">
						<view class="image">
							<u-badge type="error" count="7" :offset="[-12,-12]"></u-badge>
							<u-icon name="calendar" color="#eb3626" size="60"></u-icon>
						</view>
						<view class="text">
							待发货
						</view>
					</view>
					<view class="tool_item" @click="view_all(2)">
						<view class="image">
							<u-badge type="error" count="7" :offset="[-12,-12]"></u-badge>
							<u-icon name="car" color="#eb3626" size="60"></u-icon>
						</view>
						<view class="text">
							待收货
						</view>
					</view>
					<view class="tool_item" @click="view_all(3)">
						<view class="image">
							<u-icon name="list-dot" color="#eb3626" size="60"></u-icon>
						</view>
						<view class="text">
							已完成
						</view>
					</view>
				</view>
			</u-card> -->
		</view>
		<u-card :head-style="headStyle" :body-style="headStyle">
			<view class="administration" slot="body">
				<u-cell-group>
					<u-cell-item icon="car" title="车辆管理" @click="carClick"></u-cell-item>
					<u-cell-item icon="account" title="员工管理" @click="perClick"></u-cell-item>
				</u-cell-group>
			</view>
		</u-card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				AdminInfo:{
					
				},
				headStyle: {
					padding: 0
				}
			}
		},
		onShow() {
			this.getNowAdminInfo();
		},
		methods: {
			getNowAdminInfo() {
				this.$u.api.getNowAdminInfo({}).then(res => {
					console.log(res,'getNowAdminInfogetNowAdminInfo');
					if (res.status == 200) {
						this.AdminInfo  = res.data;
						// uni.showToast({
						// 	title: '登录成功',
						// 	duration: 2000,

						// });

					}
				})
			},
			view_all(tab) {
				switch (tab) {
					case 0:
						uni.navigateTo({
							url: '/pages/my_order/my_order?tab=0'
						});
						break;
					case 1:
						uni.navigateTo({
							url: '/pages/my_order/my_order?tab=1'
						});
						break;
					case 2:
						uni.navigateTo({
							url: '/pages/my_order/my_order?tab=2'
						});
						break;
					case 3:
						uni.navigateTo({
							url: '/pages/my_order/my_order?tab=3'
						});
					default:
						break;
				}

			},
			perClick() {
				uni.navigateTo({
					url: '/pages/employee_management/employee_management'
				});
			},
			carClick() {
				uni.navigateTo({
					url: '/pages/appointment_car/appointment_car'
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f1f1f1;
	}

	.personal {
		.user_info {
			position: relative;

			.background {
				height: 160rpx;
				background-color: #eb3626;
				border-bottom-right-radius: 28%;
				border-bottom-left-radius: 28%;
			}

			.info {
				width: 100%;
				position: absolute;
				bottom: -100rpx;
				left: 0;

				.info_wrap {
					display: flex;
					align-items: center;

					.image {
						width: 110rpx;
						height: 110rpx;

						image {
							width: 100%;
							border-radius: 50%;
							overflow: hidden;
						}
					}

					.information {
						margin-left: 16rpx;

						.name {
							font-size: 32rpx;
							font-weight: 700;
							margin-bottom: 6rpx;
						}
					}
				}
			}
		}

		.tool {
			margin-top: 100rpx;

			.tool_head {
				display: flex;
				justify-content: space-between;

				.title {
					font-weight: 700;
				}

				.view_all {
					font-size: 24rpx;
					color: #999;
				}
			}

			.tool_wrap {
				display: flex;
				justify-content: space-around;
				align-items: center;

				.tool_item {
					display: flex;
					flex-direction: column;
					align-items: center;

					.image {
						position: relative;
						width: 60rpx;
						height: 60rpx;

						image {
							width: 100%;
						}
					}
				}
			}
		}

		.administration {

			u-cell-ground {
				border-radius: 10rpx;
			}
		}
	}
</style>
